<template>
  <div class="login-page">
    <div class="login-top">
      <img src="#" >
      <p>AI智慧校园</p >
    </div>

    <div class="repassword">
      <h3>重置密码</h3>
      <P class="tell"><input type="tel" placeholder="请输入手机号" class="tel"></P>
      <P class="tell"><input type="tel" placeholder="请输入您要设置的新密码" class="tel"></P>
      <P class="tell"><input type="tel" placeholder="请再次输入您设置的新密码" class="tel"></P>
      <el-button
          type="success"
          size="small"
          class="login-submit"
          @click.native.prevent="handleLogin"
      >重置密码</el-button>
      <p class="login-tip">记起密码？<a href="#">立即登录</a></p >
    </div>

    <div class="login-footer">
      <div class="login-sbox">
        <ul>
          <li>
            <a href=" ">联系客服</a >
          </li>
          <li>|</li>
          <li>
            <a href="#">加入我们</a >
          </li>
          <li>|</li>
          <li>
            <a href="#">关于我们</a >
          </li>
          <li>|</li>
          <li>
            <a href="#">友情链接</a >
          </li>
        </ul>
      </div>
      <div class="login-copyright">
        {{ website.copyright}}
         &nbsp;<a href="https://beian.miit.gov.cn/" target="_blank" style="color: #999;font-size: 14px;"
        >ICP证：{{ website.icpURL }}</a
      >
    <a
          target="_blank"
          href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44011202001838"
          style="
            display: inline-block;
            text-decoration: none;
            height: 20px;
            line-height: 20px;
            vertical-align: middle;
            margin-left: 12px;
          "
        >
          <img
            src="../../../public/img/PublicSecurity.png"
            style="float: left; width: 16px; height: 16px; vertical-align: middle;"
          />
          <p
            style="
              float: left;
              height: 20px;
              line-height: 20px;
              margin: 0px 0px 0px 5px;
              color: #939393;
            "
          >
            粤公网安备 44011202001838号
          </p>
        </a>
        &nbsp;{{ website.companyName }}
      </div>
    </div>
  </div>
</template>

<script>
import Verify from "@/components/verifition/Verify";
import {mapGetters} from "vuex";
export default {
  name: "Resetpassword",
  components: {
    Verify,
  },
  data() {
    return {
      resetForm: {
        password1: "",
        password2: "",
        code: "",
        randomStr: "blockPuzzle",
      },
      checked: false,
      code: {
        src: undefined,
        len: 4,
      },
      loginRules: {
        password1: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, message: "密码长度最少为6位", trigger: "blur" },
        ],
        password2: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, message: "密码长度最少为6位", trigger: "blur" },
        ],
      },
      passwordType: "password1",

    };
  },
  computed: {
    ...mapGetters(['website'])
  },
  methods: {
    //跳转到登录
    gotoLogin(){
      this.$router.push('/login')
    },
    showPassword() {
      this.passwordType == ""
          ? (this.passwordType = "password")
          : (this.passwordType = "");
    },
    handleReset() {
      // this.$refs.resetForm.validate((valid) => {
      //   if (valid) {
      //     this.$refs.verify.show();
      //   }
      // });
      this.$router.push('/login');
    },

  },
};
</script>

<style lang="scss">
.repassword{
  width: 500px;
  height: 480px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  /*box-shadow:  0 2px 6px 0 rgba(145, 145, 145, 17);*/
  background-color: #fff;
  border-radius: 8px;
  padding: 0 60px;
}
.repassword h3{
  font-size: 17px;
  text-align: center;
  padding-top: 30px;
}
.tell{
  width: 100%;
  text-indent: 15px;
  border-radius: 4px;
  border: 1px solid #C3CBD6;
}
.tel{
  /*width: 100%;*/
  text-indent: 15px;
  border-radius: 4px;
  border: none;
  /*display: block;*/
  padding:14px 0  14px 0;
}
.login-tip {
  color: #666;
  text-align: center;
  font-size: 15px;
}
.login-tip a{
  color: #03BB7A;
  font-weight: 700;
}
//.reset-form{
//  margin: 10px 0;
//
//  i {
//    color: #409eff;
//  }
//
//  .el-form-item__content {
//    width: 100%;
//  }
//
//  .el-form-item {
//    margin-bottom: 12px;
//  }
//
//  .el-input {
//    //注释掉自定义的input样式  @12.25
//    input {
//      text-indent: 15px;
//      background: transparent;
//      color: #333;
//      border-bottom: 1px solid rgb(235, 237, 242);
//      margin-bottom: 10px;
//    }
//
//    .el-input__prefix {
//      i {
//        padding: 0 5px;
//        font-weight: 600;
//        font-size: 18px !important;
//      }
//    }
//  }
//}

</style>